<template>
	<!-- 20210301 -->
	<view class="layer-share-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 分享浮层 -->
			<ty-layer-pop-up v-if="show" @overlayClick="overlayClick">
				<!-- 浮层内容 -->
				<view class="layer-content padding-top-40 bg-ff" style="padding-bottom: 70rpx;" @click.stop="">
					<!-- 标题 -->
					<view class="flex align-center justify-center">
						<view class="border-line"></view>
						<text class="text-24 text-aa" style="margin:0 120rpx;">分享</text>
						<view class="border-line"></view>
					</view>
					
					<view class="margin-top-50">
						<view class="flex justify-around">
							<view class="flex flex-direction align-center" v-if="auth.includes('weixin')"
								@click="share('weixin')">
								<image class="jc-image-80" src="/static/hzjc/share_weixin.png" mode="aspectFill">
								</image>
								<view class="margin-top-10 text-24 text-4d">微信好友</view>
							</view>
							<view class="flex flex-direction align-center" v-if="auth.includes('weixinquan')"
								@click="share('weixinquan')">
								<image class="jc-image-80" src="/static/hzjc/share_weixinquan.png" mode="aspectFill">
								</image>
								<view class="margin-top-10 text-24 text-4d">朋友圈</view>
							</view>
							<view class="flex flex-direction align-center" v-if="auth.includes('qq')"
								@click="share('qq')">
								<image class="jc-image-80" src="/static/hzjc/share_qq.png" mode="aspectFill"></image>
								<view class="margin-top-10 text-24 text-4d">QQ好友</view>
							</view>
						</view>
					</view>

				</view>
			</ty-layer-pop-up>
		</view>
		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否显示浮层
			show: {
				type: Boolean,
				default: false
			},
			// 支持分享类型
			auth: {
				type: Array,
				default: () => ['weixin', 'weixinquan', 'qq']
			},
			// 分享标题
			title: {
				type: String,
				default: ''
			},
			// 分享链接
			href: {
				type: String,
				default: ''
			},
			// 分享图片链接
			imageUrl: {
				type: String,
				default: ''
			},
		},
		data() {
			return {

			}
		},

		methods: {
			overlayClick() {
				this.$emit("update:show", false)
			},

			share(type) {
				// 分享给微信好友
				if (type == 'weixin') {
					uni.share({
						provider: "weixin",
						type: 0,
						title: this.title,
						summary: this.title,
						// provider 为 weixin 时必选，分享到聊天界面
						scene: "WXSceneSession",
						href: this.href,
						imageUrl: this.imageUrl,
						success: (res) => {
							console.log("shareSuccess", res)
						},
						fail: (err) => {
							console.log("shareFail", err)
						}
					});
				} else if (type == 'weixinquan') {
					uni.share({
						provider: "weixin",
						type: 0,
						title: this.title,
						summary: this.title,
						// provider 为 weixin 时必选，分享到朋友圈
						scene: "WXSceneTimeline",
						href: this.href,
						imageUrl: this.imageUrl,
						success: (res) => {
							console.log("shareSuccess", res)
						},
						fail: (err) => {
							console.log("shareFail", err)
						}
					});
				} else if (type == 'qq') {
					uni.share({
						provider: "qq",
						type: 1,
						title: this.title,
						// type 为 1 时必选，分享内容的摘要
						summary: this.title,
						href: this.href,
						success: (res) => {
							console.log("shareSuccess", res)
						},
						fail: (err) => {
							console.log("shareFail", err)
						}
					});
				}
				this.$emit("update:show", false)

			}
		}
	}
</script>

<style scoped>
	/* 浮层内容区域 */
	.layer-content {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	/* 标题两侧分割线 */
	.border-line {
		width: 100rpx;
		height: 1rpx;
		background: #aaa;
	}
</style>